import { Home, Scan, User, Settings } from "lucide-react";
import { Link, useLocation } from "react-router-dom";

export default function NavigationSidebar() {
  const location = useLocation();

  const navItems = [
    { icon: Home, label: "主页", path: "/" },
    { icon: Scan, label: "识别", path: "/ocr" },
    { icon: User, label: "账户", path: "/account" },
    { icon: Settings, label: "配置", path: "/settings" },
  ];

  return (
    <div className="fixed left-0 top-0 h-full w-16 bg-gray-800 text-white flex flex-col items-center py-4 space-y-6 z-10">
      {navItems.map((item) => {
        const Icon = item.icon;
        const isActive = location.pathname === item.path;
        
        return (
          <Link
            key={item.path}
            to={item.path}
            className={`p-2 rounded-lg transition-colors duration-200 ${
              isActive 
                ? "bg-blue-600 text-white" 
                : "text-gray-400 hover:bg-gray-700 hover:text-white"
            }`}
            title={item.label}
          >
            <Icon size={24} />
          </Link>
        );
      })}
    </div>
  );
}